<template>
	<view>
		<u-toast ref="uToast" />
		<!-- 搭配师个人首页 userInfo -->
		<view v-if="isStylist === 0">
			<!-- 搭配师背景占位图 -->
			<view class="header">
				<view class="back" @click="back" :style="{background: headerBarBackground}">
					<view class="icon xiangqian"></view>
				</view>
				<view class="uni-padding-wrap">
					<swiper class="swiper" indicator-active-color="#FFFFFF" indicator-color="#D8D8D8" :indicator-dots="true" :autoplay="false"
					 :interval="5000" :duration="1000" :circular="true" :current="currenIndex">
						<swiper-item>
							<view style="display: flex;flex-direction: row;">
								<view class="left">
									<view class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150" @click="uploadImg(0, 'left')">
										<view v-if="bgGroup !== null && bgGroup.length >= 1 && bgGroup[0].left !== ''">
											<u-image width="490rpx" height="640rpx" :src="bgGroup[0].left" mode="aspectFill"></u-image>
											<view class="edit_Tag" hover-class="opacity7">
												<view class="flex_row">
													<image src="../../static/img/user/editImg.png" mode="aspectFit"></image>
													<view class="tip">修改</view>
												</view>
											</view>
										</view>
										<view style="display: flex;flex-direction: column;align-items: center;" v-else>
											<view class="icon jia" style="color: #333333;"></view>
											<view style="font-size: 28upx;color: #666666;margin-top: 16upx;">添加风格照</view>
										</view>
									</view>
								</view>
								<view class="right">
									<view class="right_top">
										<view class="slot-btn2" hover-class="slot-btn__hover" hover-stay-time="150" @click="uploadImg(0, 'right1')">
											<view v-if="bgGroup !== null && bgGroup.length >= 1 && bgGroup[0].right1 !== ''">
												<u-image width="260rpx" height="320rpx" :src="bgGroup[0].right1" mode="aspectFill"></u-image>
												<view class="edit_Tag" hover-class="opacity7" style="left: 85upx !important">
													<view class="flex_row">
														<image src="../../static/img/user/editImg.png" mode="aspectFill"></image>
														<view class="tip">修改</view>
													</view>
												</view>
											</view>
											<view style="display: flex;flex-direction: column;align-items: center;" v-else>
												<view class="icon jia" style="color: #333333;"></view>
												<view style="font-size: 28upx;color: #666666;margin-top: 16upx;">添加风格照</view>
											</view>
										</view>
									</view>
									<view class="right_bottom">
										<view class="slot-btn3" hover-class="slot-btn__hover" hover-stay-time="150" @click="uploadImg(0, 'right2')">
											<view v-if="bgGroup !== null && bgGroup.length >= 1 && bgGroup[0].right2 !== ''">
												<u-image width="260rpx" height="320rpx" :src="bgGroup[0].right2" mode="aspectFill"></u-image>
												<view class="edit_Tag" hover-class="opacity7" style="left: 85upx !important">
													<view class="flex_row">
														<image src="../../static/img/user/editImg.png" mode="aspectFit"></image>
														<view class="tip">修改</view>
													</view>
												</view>
											</view>
											<view style="display: flex;flex-direction: column;align-items: center;" v-else>
												<view class="icon jia" style="color: #333333;"></view>
												<view style="font-size: 28upx;color: #666666;margin-top: 16upx;">添加风格照</view>
											</view>
										</view>
									</view>
								</view>
							</view>
						</swiper-item>
						<swiper-item>
							<view style="display: flex;flex-direction: row;">
								<view class="left">
									<view class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150" @click="uploadImg(1, 'left')">
										<view v-if="bgGroup !== null && bgGroup.length >= 2 && bgGroup[1].left !== ''">
											<u-image width="490rpx" height="640rpx" :src="bgGroup[1].left" mode="aspectFill"></u-image>
											<view class="edit_Tag" hover-class="opacity7">
												<view class="flex_row">
													<image src="../../static/img/user/editImg.png" mode="aspectFit"></image>
													<view class="tip">修改</view>
												</view>
											</view>
										</view>
										<view style="display: flex;flex-direction: column;align-items: center;" v-else>
											<view class="icon jia" style="color: #333333;"></view>
											<view style="font-size: 28upx;color: #666666;margin-top: 16upx;">添加风格照</view>
										</view>
									</view>
								</view>
								<view class="right">
									<view class="right_top">
										<view class="slot-btn2" hover-class="slot-btn__hover" hover-stay-time="150" @click="uploadImg(1, 'right1')">
											<view v-if="bgGroup !== null && bgGroup.length >= 2 && bgGroup[1].right1 !== ''">
												<u-image width="260rpx" height="320rpx" :src="bgGroup[1].right1" mode="aspectFill"></u-image>
												<view class="edit_Tag" hover-class="opacity7" style="left: 85upx !important">
													<view class="flex_row">
														<image src="../../static/img/user/editImg.png" mode="aspectFill"></image>
														<view class="tip">修改</view>
													</view>
												</view>
											</view>
											<view style="display: flex;flex-direction: column;align-items: center;" v-else>
												<view class="icon jia" style="color: #333333;"></view>
												<view style="font-size: 28upx;color: #666666;margin-top: 16upx;">添加风格照</view>
											</view>
										</view>
									</view>
									<view class="right_bottom">
										<view class="slot-btn3" hover-class="slot-btn__hover" hover-stay-time="150" @click="uploadImg(1, 'right2')">
											<view v-if="bgGroup !== null && bgGroup.length >= 2 && bgGroup[1].right2 !== ''">
												<u-image width="260rpx" height="320rpx" :src="bgGroup[1].right2" mode="aspectFill"></u-image>
												<view class="edit_Tag" hover-class="opacity7" style="left: 85upx !important">
													<view class="flex_row">
														<image src="../../static/img/user/editImg.png" mode="aspectFit"></image>
														<view class="tip">修改</view>
													</view>
												</view>
											</view>
											<view style="display: flex;flex-direction: column;align-items: center;" v-else>
												<view class="icon jia" style="color: #333333;"></view>
												<view style="font-size: 28upx;color: #666666;margin-top: 16upx;">添加风格照</view>
											</view>
										</view>
									</view>
								</view>
							</view>
						</swiper-item>
						<swiper-item>
							<view style="display: flex;flex-direction: row;">
								<view class="left">
									<view class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150" @click="uploadImg(2, 'left')">
										<view v-if="bgGroup !== null && bgGroup.length === 3 && bgGroup[2].left !== ''">
											<u-image width="490rpx" height="640rpx" :src="bgGroup[2].left" mode="aspectFill"></u-image>
											<view class="edit_Tag" hover-class="opacity7">
												<view class="flex_row">
													<image src="../../static/img/user/editImg.png" mode="aspectFit"></image>
													<view class="tip">修改</view>
												</view>
											</view>
										</view>
										<view style="display: flex;flex-direction: column;align-items: center;" v-else>
											<view class="icon jia" style="color: #333333;"></view>
											<view style="font-size: 28upx;color: #666666;margin-top: 16upx;">添加风格照</view>
										</view>
									</view>
								</view>
								<view class="right">
									<view class="right_top">
										<view class="slot-btn2" hover-class="slot-btn__hover" hover-stay-time="150" @click="uploadImg(2, 'right1')">
											<view v-if="bgGroup !== null && bgGroup.length === 3 && bgGroup[2].right1 !== ''">
												<u-image width="260rpx" height="320rpx" :src="bgGroup[2].right1" mode="aspectFill"></u-image>
												<view class="edit_Tag" hover-class="opacity7" style="left: 85upx !important">
													<view class="flex_row">
														<image src="../../static/img/user/editImg.png" mode="aspectFill"></image>
														<view class="tip">修改</view>
													</view>
												</view>
											</view>
											<view style="display: flex;flex-direction: column;align-items: center;" v-else>
												<view class="icon jia" style="color: #333333;"></view>
												<view style="font-size: 28upx;color: #666666;margin-top: 16upx;">添加风格照</view>
											</view>
										</view>
									</view>
									<view class="right_bottom">
										<view class="slot-btn3" hover-class="slot-btn__hover" hover-stay-time="150" @click="uploadImg(2, 'right2')">
											<view v-if="bgGroup !== null && bgGroup.length === 3 && bgGroup[2].right2 !== ''">
												<u-image width="260rpx" height="320rpx" :src="bgGroup[2].right2" mode="aspectFill"></u-image>
												<view class="edit_Tag" hover-class="opacity7" style="left: 85upx !important">
													<view class="flex_row">
														<image src="../../static/img/user/editImg.png" mode="aspectFit"></image>
														<view class="tip">修改</view>
													</view>
												</view>
											</view>
											<view style="display: flex;flex-direction: column;align-items: center;" v-else>
												<view class="icon jia" style="color: #333333;"></view>
												<view style="font-size: 28upx;color: #666666;margin-top: 16upx;">添加风格照</view>
											</view>
										</view>
									</view>
								</view>
							</view>
						</swiper-item>
					</swiper>
				</view>
			</view>

			<!-- 搭配师图片修改以及编辑资料 轮播图首张图片 -->
			<view class="editArea">
				<view></view>
				<view style="display: flex;">
					<view class="editArea_add" @click="changeStyleIndex(0)">
						<view class="icon jia" style="color: #999999;font-size: 28upx;" v-if="isBlank(bgGroup[0].left)"></view>
						<u-image width="79rpx" height="79rpx" v-else :src="bgGroup[0].left"></u-image>
					</view>
					<view class="editArea_add" @click="changeStyleIndex(1)">
						<view class="icon jia" style="color: #999999;font-size: 28upx;" v-if="isBlank(bgGroup[1].left)"></view>
						<u-image width="79rpx" height="79rpx" v-else :src="bgGroup[1].left"></u-image>
					</view>
					<view class="editArea_add" @click="changeStyleIndex(2)">
						<view class="icon jia" style="color: #999999;font-size: 28upx;" v-if="isBlank(bgGroup[2].left)"></view>
						<u-image width="79rpx" height="79rpx" v-else :src="bgGroup[2].left"></u-image>
					</view>
				</view>
				<view class="info" @click="toPage('/pagesB/pages/my/stylistInfo')">
					<image src="../../static/img/user/info_large.png"></image>
				</view>
			</view>

			<!-- 搭配师具体信息 -->
			<view class="info_view">
				<view class="title" style="margin: 0;">
					<view class='flex_row'>
						<span style="font-size: 36upx;color: #333333;font-weight: bold;">{{ userInfo.nickname }}</span>
						<image v-if="userInfo.gander === 0" src="../../static/img/user/male.png" mode="" style="margin-left: 13upx;width: 24upx;height: 24upx;"
						 mode="aspectFit"></image>
						<image v-if="userInfo.gander === 1" src="../../static/img/user/female.png" mode="" style="margin-left: 13upx;width: 24upx;height: 24upx;"
						 mode="aspectFit"></image>
					</view>
					<view class="label_area" v-if="userInfo.stylistLevel !== null">
						<view class="label">{{ userInfo.stylistLevel.levelName }}</view>
					</view>
				</view>
				<view class="title" style="margin: 16upx 0 12upx 0;">
					<view>
						<span style="font-size: 30upx;color: #333333;font-weight: bold;">擅长风格</span>
					</view>
				</view>
				<!-- 风格类型 -->
				<view class="list" v-if="tagsList.length > 0">
					<view :class="{'offTag': showTag === false }" class="flex_wrap">
						<u-tag :text="row" type="info" shape="circle " mode="plain" :key="index" v-for="(row,index) in tagsList" style="margin-right: 12upx;margin-bottom: 10upx;" />
					</view>
					<view style="width: 46upx;" :style="{ transform:(showTag == true?'rotate(180deg)':'rotate(0deg)') }" @tap="showNav">
						<image src="../../static/img/select.png" mode="aspectFit" style="width: 46upx;height: 46upx;"></image>
					</view>
				</view>
			</view>

			<!-- 操作栏 -->
			<view class="bottom_list" v-if="isStylist === 0">
				<view class="row" @click="toPage('/pages/order/order_list/order_list')">
					<view class="title">
						<image src="../../static/img/user/stylistIndex_01.png" mode="aspectFit"></image>
						<span>我的订单</span>
					</view>
					<view class="right">
						<view class="icon xiangyou"></view>
					</view>
				</view>
				<view class="row" @click="toPage('/pages/stylist/wallet')">
					<view class="title">
						<image src="../../static/img/user/stylistIndex_02.png" mode="aspectFit"></image>
						<span>钱包</span>
					</view>
					<view class="right">
						<view class="icon xiangyou"></view>
					</view>
				</view>
				<view class="row" @click="toPage('/pagesB/pages/wearPlan/stylist_planList')">
					<view class="title">
						<image src="../../static/img/user/stylistIndex_03.png" mode="aspectFit"></image>
						<span>搭配方案</span>
					</view>
					<view class="right">
						<view class="icon xiangyou"></view>
					</view>
				</view>
				<view class="row" @click="toPage('/pagesB/pages/my/setting')">
					<view class="title">
						<image src="../../static/img/user/stylistIndex_04.png" mode="aspectFit"></image>
						<span>设置</span>
					</view>
					<view class="right">
						<view class="icon xiangyou"></view>
					</view>
				</view>
				<button class="row" open-type="share" style="line-height: 0 !important;text-align: left !important;">
					<view class="title">
						<image src="../../static/img/user/stylistIndex_05.png" mode="aspectFit"></image>
						<span>分享</span>
					</view>
					<view class="right">
						<view class="icon xiangyou"></view>
					</view>
				</button>
				<view class="row" @click="toPage('/pages/feedback')">
					<view class="title">
						<image src="../../static/img/user/stylistIndex_06.png" mode="aspectFit"></image>
						<span>反馈</span>
					</view>
					<view class="right">
						<view class="icon xiangyou"></view>
					</view>
				</view>
			</view>

			<!-- 占位 -->
			<view class="place-bottom"></view>
		</view>

		<!-- 用户查看搭配师首页 userData -->
		<view v-if="isStylist === 1">
			<u-top-tips ref="uTips"></u-top-tips>
			<!-- <u-popup mode="bottom" v-model="buyVisible" :border-radius="36" :closeable="false">
				<view class="bottomSheet_content">
					<view class="card">
						<image class="bg" src="../../static/img/user/card_bg.png" mode="aspectFit"></image>
						<view class="right_top">
							<image src="../../static/img/user/card_icon_02.png" mode="aspectFit"></image>
						</view>
						<view class="right_top2">
							<image src="../../static/img/user/card_icon.png" mode="aspectFit"></image>
						</view>
						<view class="top">
							<view class="first_line">
								<view class="avater">
									<u-avatar :src='userInfo.headphoto' mode="circle" size="90" img-mode="aspectFit"></u-avatar>
								</view>
								<view class="flex_col" style="align-items: flex-start;">
									<view class="name">{{ userInfo.nickname }}</view>
									<view class="tag" v-if="userInfo.stylistLevel !== null">{{ userInfo.stylistLevel.levelName }}</view>
								</view>
							</view>
							<view style="margin-top: 36upx;margin-left: 45upx;width: 372upx;color: white;font-size: 20upx;">
								开通ta的线上一周搭配方案服务 尊享在线一对一的搭配服务
							</view>
							<view class="bottom_line">
								<view class="left">开启您新的搭配之旅</view>
								<view class="flex_row" style="align-items: center;">
									<view class="tip">限时优惠</view>
									<view style="padding: 0 4upx 0 2upx;font-size: 22upx;">¥</view>
									<view class="num">9.9</view>
								</view>
							</view>

						</view>
					</view>
					<view class="title">支付方式</view>
					<view class="list-cell">
						<view class="flex_row">
							<image src="../../static/img/share/wx.png" mode="aspectFit" style="width: 60upx;height: 60upx;margin-right: 36upx;"></image>
							<view>微信支付</view>
						</view>
						<radio color="#4CD964" checked="true" />
					</view>
					<view class="mocup_btn lgbtn" @tap="$u.throttle(openCard, 500)">
						¥9.9 立即开通
					</view>
				</view>
			</u-popup> -->

			<view class="mask" v-if="loading">
				<!-- 加载动画开始 -->
				<!-- loading1~loading30挑选任意一个替换下方html 且替换对应css -->
				<view class="preloader">
					<view class="loader"></view>
				</view>
			</view>

			<view v-else>
				<!-- 搭配师背景占位图 -->
				<view class="header">
					<view class="back" @click="back" :style="{background: headerBarBackground}">
						<view class="icon xiangqian"></view>
					</view>
					<view class="uni-padding-wrap">
						<swiper class="swiper" indicator-active-color="#FFFFFF" indicator-color="#D8D8D8" :indicator-dots="true"
						 :autoplay="true" :interval="5000" :duration="1000" :circular="true">
							<swiper-item>
								<view style="display: flex;flex-direction: row;">
									<view class="left">
										<view class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
											<view v-if="bgGroup !== null && bgGroup.length >= 1 && bgGroup[0].left !== ''">
												<u-image width="490rpx" height="640rpx" :src="bgGroup[0].left" mode="aspectFill"></u-image>
											</view>
											<view style="display: flex;flex-direction: column;align-items: center;" v-else>
												<view style="font-size: 28upx;color: #666666;margin-top: 16upx;">暂未上传</view>
											</view>
										</view>
									</view>
									<view class="right">
										<view class="right_top">
											<view class="slot-btn2" hover-class="slot-btn__hover" hover-stay-time="150">
												<view v-if="bgGroup !== null && bgGroup.length >= 1 && bgGroup[0].right1 !== ''">
													<u-image width="260rpx" height="320rpx" :src="bgGroup[0].right1" mode="aspectFill"></u-image>
												</view>
												<view style="display: flex;flex-direction: column;align-items: center;" v-else>
													<view style="font-size: 28upx;color: #666666;margin-top: 16upx;">暂未上传</view>
												</view>
											</view>
										</view>
										<view class="right_bottom">
											<view class="slot-btn3" hover-class="slot-btn__hover" hover-stay-time="150">
												<view v-if="bgGroup !== null && bgGroup.length >= 1 && bgGroup[0].right2 !== ''">
													<u-image width="260rpx" height="320rpx" :src="bgGroup[0].right2" mode="aspectFill"></u-image>
												</view>
												<view style="display: flex;flex-direction: column;align-items: center;" v-else>
													<view style="font-size: 28upx;color: #666666;margin-top: 16upx;">暂未上传</view>
												</view>
											</view>
										</view>
									</view>
								</view>
							</swiper-item>
							<swiper-item>
								<view style="display: flex;flex-direction: row;">
									<view class="left">
										<view class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
											<view v-if="bgGroup !== null && bgGroup.length >= 2 && bgGroup[1].left !== ''">
												<u-image width="490rpx" height="640rpx" :src="bgGroup[1].left" mode="aspectFill"></u-image>
											</view>
											<view style="display: flex;flex-direction: column;align-items: center;" v-else>
												<view style="font-size: 28upx;color: #666666;margin-top: 16upx;">暂未上传</view>
											</view>
										</view>
									</view>
									<view class="right">
										<view class="right_top">
											<view class="slot-btn2" hover-class="slot-btn__hover" hover-stay-time="150">
												<view v-if="bgGroup !== null && bgGroup.length >= 2 && bgGroup[1].right1 !== ''">
													<u-image width="260rpx" height="320rpx" :src="bgGroup[1].right1" mode="aspectFill"></u-image>
												</view>
												<view style="display: flex;flex-direction: column;align-items: center;" v-else>
													<view style="font-size: 28upx;color: #666666;margin-top: 16upx;">暂未上传</view>
												</view>
											</view>
										</view>
										<view class="right_bottom">
											<view class="slot-btn3" hover-class="slot-btn__hover" hover-stay-time="150">
												<view v-if="bgGroup !== null && bgGroup.length >= 2 && bgGroup[1].right2 !== ''">
													<u-image width="260rpx" height="320rpx" :src="bgGroup[1].right2" mode="aspectFill"></u-image>
												</view>
												<view style="display: flex;flex-direction: column;align-items: center;" v-else>
													<view style="font-size: 28upx;color: #666666;margin-top: 16upx;">暂未上传</view>
												</view>
											</view>
										</view>
									</view>
								</view>
							</swiper-item>
							<swiper-item>
								<view style="display: flex;flex-direction: row;">
									<view class="left">
										<view class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
											<view v-if="bgGroup !== null && bgGroup.length === 3 && bgGroup[2].left !== ''">
												<u-image width="490rpx" height="640rpx" :src="bgGroup[2].left" mode="aspectFill"></u-image>
											</view>
											<view style="display: flex;flex-direction: column;align-items: center;" v-else>
												<view style="font-size: 28upx;color: #666666;margin-top: 16upx;">暂未上传</view>
											</view>
										</view>
									</view>
									<view class="right">
										<view class="right_top">
											<view class="slot-btn2" hover-class="slot-btn__hover" hover-stay-time="150">
												<view v-if="bgGroup !== null && bgGroup.length === 3 && bgGroup[2].right1 !== ''">
													<u-image width="260rpx" height="320rpx" :src="bgGroup[2].right1" mode="aspectFill"></u-image>
												</view>
												<view style="display: flex;flex-direction: column;align-items: center;" v-else>
													<view style="font-size: 28upx;color: #666666;margin-top: 16upx;">暂未上传</view>
												</view>
											</view>
										</view>
										<view class="right_bottom">
											<view class="slot-btn3" hover-class="slot-btn__hover" hover-stay-time="150">
												<view v-if="bgGroup !== null && bgGroup.length === 3 && bgGroup[2].right2 !== ''">
													<u-image width="260rpx" height="320rpx" :src="bgGroup[2].right2" mode="aspectFill"></u-image>
												</view>
												<view style="display: flex;flex-direction: column;align-items: center;" v-else>
													<view style="font-size: 28upx;color: #666666;margin-top: 16upx;">暂未上传</view>
												</view>
											</view>
										</view>
									</view>
								</view>
							</swiper-item>
						</swiper>
					</view>
				</view>

				<!-- 搭配师图片修改以及编辑资料 -->
				<view class="editArea">
					<view></view>
					<!-- 轮播图首张图片 -->
					<view style="display: flex;">
						<view class="editArea_add">
							<view class="icon tupian" style="color: #999999;font-size: 28upx;" v-if="isBlank(bgGroup[0].left)"></view>
							<u-image width="79rpx" height="79rpx" v-else :src="bgGroup[0].left"></u-image>
						</view>
						<view class="editArea_add">
							<view class="icon tupian" style="color: #999999;font-size: 28upx;" v-if="isBlank(bgGroup[1].left)"></view>
							<u-image width="79rpx" height="79rpx" v-else :src="bgGroup[1].left"></u-image>
						</view>
						<view class="editArea_add">
							<view class="icon tupian" style="color: #999999;font-size: 28upx;" v-if="isBlank(bgGroup[2].left)"></view>
							<u-image width="79rpx" height="79rpx" v-else :src="bgGroup[2].left"></u-image>
						</view>
					</view>
					<view>
						<view class="info2" @click="collectiStylist('on')" v-if="!userData.isCollectioned">
							<image src="../../static/img/user/shoucang.png" mode="aspectFit"></image>
						</view>
						<view class="info2" @click="collectiStylist('off')" v-else>
							<image src="../../static/img/user/shoucang_on.png" mode="aspectFit"></image>
						</view>
					</view>
				</view>

				<!-- 搭配师具体信息 -->
				<view class="info_view">
					<view class="title" style="margin: 0;">
						<view class='flex_row'>
							<span style="font-size: 36upx;color: #333333;font-weight: bold;">{{ userData.nickname }}</span>
							<image v-if="userData.gander === 0" src="../../static/img/user/male.png" mode="" style="margin-left: 13upx;width: 24upx;height: 24upx;"
							 mode="aspectFit"></image>
							<image v-if="userData.gander === 1" src="../../static/img/user/female.png" mode="" style="margin-left: 13upx;width: 24upx;height: 24upx;"
							 mode="aspectFit"></image>
						</view>
						<view class="label_area" v-if="userData.stylistLevel !== null">
							<view class="label">{{ userData.stylistLevel.levelName }}</view>
						</view>
					</view>
					<view class="title" style="margin: 16upx 0 12upx 0;">
						<view>
							<span style="font-size: 30upx;color: #333333;font-weight: bold;">擅长风格</span>
						</view>
					</view>
					<!-- 风格类型 -->
					<view class="list" v-if="tagsList.length > 0">
						<view :class="{'offTag': showTag === false }" class="flex_wrap">
							<u-tag :text="row" type="info" shape="circle " mode="plain" :key="index" v-for="(row,index) in tagsList" style="margin-right: 12upx;margin-bottom: 10upx;" />
						</view>
						<view style="width: 46upx;" :style="{ transform:(showTag == true?'rotate(180deg)':'rotate(0deg)') }" @tap="showNav">
							<image src="../../static/img/select.png" mode="aspectFit" style="width: 46upx;height: 46upx;"></image>
						</view>
					</view>
				</view>

				<!-- 用户查看搭配师栏 -->
				<view class="info_view">
					<view class="title">
						<view class='flex_row'>
							<span style="font-size: 36upx;color: #333333;font-weight: bold;">评价</span>
						</view>
					</view>
					<view class="evaluate_area flex_row">
						<view class="flex_row">
							<view class="rateValue">{{ userData.comprehensiveScore === null ? 0 : userData.comprehensiveScore.toFixed(1) }}</view>
							<view class="flex_col" style="align-items: flex-start;">
								<view style="padding-left: 6upx;font-size: 20upx;color: #666666;">搭配师评分</view>
								<u-rate disabled :count="5" :current="userData.comprehensiveScore === null ? 0 : userData.comprehensiveScore.toFixed(1)"
								 active-color="#FFCC0B" size="29" gutter="5" />
							</view>
						</view>
						<view class="flex_row right_area">
							<view class="flex_col" style="margin-right: 25upx;">
								<view>专业度</view>
								<view>{{ userData.majorScore === null ? 0 : userData.majorScore.toFixed(1) }}</view>
							</view>
							<view class="flex_col" style="margin-right: 25upx;">
								<view>回应速度</view>
								<view>{{ userData.responseScore === null ? 0 : userData.responseScore.toFixed(1) }}</view>
							</view>
							<view class="flex_col">
								<view>服务态度</view>
								<view>{{ userData.attitudeScore === null ? 0 : userData.attitudeScore.toFixed(1) }}</view>
							</view>
						</view>
					</view>
					<!-- 评价列表 -->
					<view class="pingjiaList flex_wrap">
						<view class="box_black" v-for="(row,index) in userData.commentTags" :key="index">
							<view class="text">{{row}}</view>
						</view>
					</view>
				</view>
				<view class="mocup_btn lgbtn" @tap="$u.throttle(buyonlinePlan, 500)">
					购买线上搭配方案
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		mapState
	} from 'vuex';
	import {
		isBlank,
		uuid
	} from '@/utils/common.js'

	const qiniuUploader = require('../../../common/qiniuUploader.js');

	export default {
		computed: {
			...mapState(['userInfo'])
		},
		data() {
			return {
				isStylist: 0, // 0. 搭配师自己进入主页 1.作为用户进入主页
				currenIndex: 0, //当前显示第几张风格照
				loading: false,
				userData: {}, // isStylist为1时的用户数据
				// 轮播页展示
				bgGroup: [{
					"left": '',
					"right1": '',
					"right2": ''
				}, {
					"left": '',
					"right1": '',
					"right2": ''
				}, {
					"left": '',
					"right1": '',
					"right2": ''
				}], // 图片列表
				postData: {
					key: '',
					token: ''
				},
				// 风格类型list
				tagsList: [],
				// 评分
				rateValue: 4.9,
				buyVisible: false,
				// 标签更多显示
				showTag: false,
				// 标题栏
				headerBarBackground: 'transparent'
			}
		},
		onLoad(options) {
			if (options.id && options.id !== this.userInfo.id) {
				// 用户进入查看搭配师
				this.isStylist = 1 // 添加标
				this.loading = true
				// 调用接口获取搭配师信息
				var data = {
					id: options.id
				}
				this.$u.api.getUser(data).then(res => {
					this.loading = false
					if (res.code === 200) {
						this.userData = res.data

						if (!isBlank(JSON.parse(this.userData.tags))) {
							this.tagsList = JSON.parse(this.userData.tags)
						}

						if (!isBlank(this.userData.bgGroup)) {
							this.bgGroup = JSON.parse(this.userData.bgGroup)
							if (this.bgGroup.length === 0) {
								// 加入两个arr
								this.bgGroup.push({
									"left": '',
									"right1": '',
									"right2": ''
								})
								this.bgGroup.push({
									"left": '',
									"right1": '',
									"right2": ''
								})
							}
							if (this.bgGroup.length === 1) {
								// 加入两个arr
								this.bgGroup.push({
									"left": '',
									"right1": '',
									"right2": ''
								})
								this.bgGroup.push({
									"left": '',
									"right1": '',
									"right2": ''
								})
							}
							if (this.bgGroup.length === 2) {
								// 加入两个arr
								this.bgGroup.push({
									"left": '',
									"right1": '',
									"right2": ''
								})
							}
						} else {
							this.bgGroup = [{
								"left": '',
								"right1": '',
								"right2": ''
							}, {
								"left": '',
								"right1": '',
								"right2": ''
							}, {
								"left": '',
								"right1": '',
								"right2": ''
							}]
						}

					}
				})
			} else {
				// 搭配师本人

				// 设置标签list
				if (!isBlank(JSON.parse(this.userInfo.tags))) {
					this.tagsList = JSON.parse(this.userInfo.tags)
				}

				// 设置背景图list
				if (!isBlank(this.userInfo.bgGroup)) {
					this.bgGroup = JSON.parse(this.userInfo.bgGroup)
					if (this.bgGroup.length === 0) {
						// 加入两个arr
						this.bgGroup.push({
							"left": '',
							"right1": '',
							"right2": ''
						})
						this.bgGroup.push({
							"left": '',
							"right1": '',
							"right2": ''
						})
					}
					if (this.bgGroup.length === 1) {
						// 加入两个arr
						this.bgGroup.push({
							"left": '',
							"right1": '',
							"right2": ''
						})
						this.bgGroup.push({
							"left": '',
							"right1": '',
							"right2": ''
						})
					}
					if (this.bgGroup.length === 2) {
						// 加入两个arr
						this.bgGroup.push({
							"left": '',
							"right1": '',
							"right2": ''
						})
					}
				} else {
					this.bgGroup = [{
						"left": '',
						"right1": '',
						"right2": ''
					}, {
						"left": '',
						"right1": '',
						"right2": ''
					}, {
						"left": '',
						"right1": '',
						"right2": ''
					}]
				}
			}
		},
		onShow() {
			// 搭配师本人返回页面刷新数据
			if (this.isStylist === 0) {
				this.tagsList = JSON.parse(this.userInfo.tags)
			}
		},
		onPageScroll: function(e) {
			this.headerBarBackground = 'rgba(5, 5, 5,' + e.scrollTop / 300 + ')'
		},
		methods: {
			isBlank,
			toPage(url) {
				uni.navigateTo({
					url: url
				})
			},
			changeStyleIndex(index) {
				this.currenIndex = index;
			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			// 展开/收缩 标签栏
			showNav() {
				this.showTag = !this.showTag;
			},
			// 上传图片
			async uploadImg(index, position) {
				var _this = this

				uni.chooseImage({
					count: 3,
					sizeType: ['original', 'compressed'],
					sourceType: ['album', 'camera'],
					success: function(res) {
						uni.showLoading({
							title: '上传中...'
						});

						let tempFilePaths = res.tempFilePaths

						// 获取token 
						_this.$u.api.getPostingQiniuToken().then(res => {
							if (res.code === 200) {

								_this.postData.token = JSON.parse(res.data).qiniuToken
								var imgList = []; //多张图片地址，保存到一个数组当中
								var state = 0; //state记录当前已经上传到第几张图片

								// 开始上传
								new Promise(function(resolve, reject) {
									for (var i = 0; i < tempFilePaths.length; i++) {
										qiniuUploader.upload(tempFilePaths[i], (res) => {
											state++;
											imgList.push(res.imageURL);
											if (state == tempFilePaths.length) {
												// 最后一张上传完成
												resolve(imgList);
											}
										}, (error) => {
											// reject('error');
											console.log('error: ' + error);
										}, {
											region: 'SCN',
											domain: 'https://posting.imguangguang.com',
											key: _this.postData.key, // [非必须]自定义文件 key。如果不设置，默认为使用微信小程序 API 的临时文件名
											// 以下方法三选一即可，优先级为：uptoken > uptokenURL > uptokenFunc
											uptoken: _this.postData.token,
										})
									}
								}).then(function(imgList) {
									// 回调事件

									if (tempFilePaths.length === 1) {
										var imgIndex = state - 1
										let img = imgList[imgIndex]

										if (position === 'left') {
											_this.bgGroup[index].left = img
										} else if (position === "right1") {
											_this.bgGroup[index].right1 = img
										} else if (position === "right2") {
											_this.bgGroup[index].right2 = img
										}
									}

									if (imgList.length === 2) {
										_this.bgGroup[index].left = imgList[0]
										_this.bgGroup[index].right1 = imgList[1]
									}

									if (imgList.length === 3) {
										_this.bgGroup[index].left = imgList[0]
										_this.bgGroup[index].right1 = imgList[1]
										_this.bgGroup[index].right2 = imgList[2]
									}

									// 调用修改资料接口
									let data = {
										bgGroup: JSON.stringify(_this.bgGroup)
									}
									_this.$u.api.editUser(data).then(res => {
										uni.hideLoading()
										if (res.code === 200) {
											uni.showToast({
												title: "上传成功",
												icon: "none",
											})
										} else {
											uni.showToast({
												title: "上传失败请重试",
												icon: "none",
											})
										}
									})

								})
							}
						})
					}
				});
			},

			// 用户、取消收藏搭配师
			collectiStylist(state) {
				var data = {
					userId: this.userData.id
				}
				if (state === 'on') {
					// 收藏
					this.$u.api.addCollection(data).then(res => {
						if (res.code === 200) {
							this.userData.isCollectioned = true
							uni.showToast({
								title: "收藏成功",
								icon: "none"
							})
						}
					})
				} else {
					// 取消收藏
					this.$u.api.delCollection(data).then(res => {
						if (res.code === 200) {
							this.userData.isCollectioned = false
						}
					})
				}
			},

			// 购买线上搭配方案
			buyonlinePlan() {
				var that = this
				//  this.buyVisible = true
				var data = {
					stylistUserId: this.userData.id,
					payType: 0,
				}

				that.$u.api.buyWearSchemeFromStyHome(data).then(res => {
					if (res.code === 200) {
						console.log("获取支付参数成功，开始调用微信支付接口")
						console.log(res)
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp: res.data.timeStamp,
							nonceStr: res.data.nonceStr,
							package: res.data.package,
							signType: res.data.signType,
							paySign: res.data.paySign,
							success: function(res) {
								console.log('success:' + JSON.stringify(res));
								that.$refs.uToast.show({
									title: '购买成功, 正在邀请搭配师为您制作穿搭方案，可完善资料以供搭配师参考',
									type: 'success',
									duration: '2000',
									url: '/pagesB/pages/chat/chat?name=' + that.userData.nickname + '&imUser=' + that.userData.imUser +
										"&face=" + that.userData.headphoto
								})
							},
							fail: function(err) {
								uni.showToast({
									icon: 'none',
									title: '已取消付款'
								})
								console.log('fail:' + JSON.stringify(err));
							}
						});
					}
				})
			},
			// 开通9.9卡
			openCard() {},
			// 搭配师分享至微信
			onShareAppMessage(res) {
				if (res.from === 'button') { // 来自页面内分享按钮
					// console.log(res.target)
				}

				let invitation_code = this.userInfo.invitationCode
				let jumpUrl = '/pagesB/pages/my/indexStylist?id=' + this.userInfo.id

				// 第一步：把分享路径首页的参数值即要跳转到另一个页面的路径和该页面的参数作为 URI 组件进行编码，即下面代码中的str进行编码。
				var url = encodeURIComponent(jumpUrl);
				// 第二步：把编过的码转成字符串。
				var strUrl = JSON.stringify(url);

				return {
					title: '快来陌搭领取专属你的穿衣搭配方案吧',
					path: '/pages/order/placeOrderIndex?invite_code=' + invitation_code + '&jumpUrl=' + strUrl
				}
			}
		}
	}
</script>
<style lang="scss" scoped>
	@import "@/static/css/loading.scss";

	page {
		position: relative;
		background-color: #F7F8FA;
	}

	// 关闭标签栏
	.offTag {
		overflow: hidden;
		height: 50upx;
	}

	.u-tag {
		margin-bottom: 10upx;
	}

	.header {
		width: 100%;
		height: 640upx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		z-index: 10;
		background-color: #d3d3d3;

		.back {
			position: fixed;
			top: 66rpx;
			left: 10rpx;
			z-index: 20;
			padding: 20rpx;
			border-radius: 50%;

			.icon {
				color: white;
				font-size: 20px;
			}
		}

		// 轮播图
		.uni-padding-wrap {
			width: 100%;
			height: 100%;

			swiper {
				width: 100%;
				height: 640upx;
			}
		}

		// 修改标签
		.edit_Tag {
			padding: 6upx 14upx;
			background: rgba(255, 255, 255, 0.39);
			border-radius: 20upx;
			position: absolute;
			left: 192upx;
			bottom: 20upx;

			image {
				width: 27upx;
				height: 27upx;
				margin-right: 9upx;
			}

			.tip {
				font-size: 21upx;
				font-weight: 400;
				color: #111111;
			}
		}

		.icon-btn {
			width: 120upx;
			height: 60upx;
			flex-shrink: 0;
			display: flex;

			.icon {
				color: #fff;
				width: 60upx;
				height: 60upx;
				display: flex;
				justify-content: flex-end;
				align-items: center;
				font-size: 42upx;
			}
		}


		// 无图片时显示
		.left {
			width: 490upx;
			height: 100%;
		}

		.right {
			width: 260upx;

			&_top {
				height: 320upx;
				background: #EAEAEA;
			}

			&_bottom {
				height: 320upx;
				background: #DEDEDE;
			}
		}

		.slot-btn {
			width: 490upx;
			height: 640upx;
			display: flex;
			justify-content: center;
			align-items: center;
			background: rgb(244, 245, 246);
			position: relative;
		}

		.slot-btn2 {
			width: 260upx;
			height: 320upx;
			display: flex;
			justify-content: center;
			align-items: center;
			background: #EAEAEA;
			position: relative;
		}

		.slot-btn3 {
			width: 260upx;
			height: 320upx;
			display: flex;
			justify-content: center;
			align-items: center;
			background: #DEDEDE;
			position: relative;
		}

		.slot-btn__hover {
			background-color: rgba(235, 236, 238, 0.3);
		}
	}


	.editArea {
		padding: 16upx 24upx 39upx 24upx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		&_add {
			width: 79upx;
			height: 79upx;
			background-color: #d8d8d8;
			border-radius: 12upx;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-right: 20upx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.info {
			width: 49upx;
			height: 49upx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.info2 {
			width: 39upx;
			height: 34upx;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}

	.place-bottom {
		height: 200upx;
	}

	.info_view {
		margin: 0upx 30upx 30upx 30upx;
		padding: 20upx 4% 20upx 4%;
		background-color: #fff;
		border-radius: 20upx;

		.title {
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.label_area {
			.label {
				padding-top: 18upx;
				background: url(../../static/img/user/stylist_tag_bg.png) no-repeat;
				background-size: 100% 100%;
				width: 158upx;
				height: 61upx;
				line-height: 40upx;
				font-size: 26upx;
				color: white;
				font-weight: bold;
				text-align: center;
			}
		}

		.list {
			margin-bottom: 20upx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;

			.box {
				padding: 8upx 28upx 8upx 28upx;
				border-radius: 24upx;
				border: 1px solid #1C1724;
				margin-right: 24upx;
				margin-bottom: 5upx;
				display: inline-block;

				.img {
					width: 100%;
					display: flex;
					justify-content: center;

					.icon {
						font-size: 50upx;
						color: #464646;
					}
				}

				.text {
					width: 100%;
					display: flex;
					justify-content: center;
					font-size: 28upx;
					color: #3d3d3d;
				}
			}

		}
		
		.pingjiaList {
			margin-bottom: 20upx;
			.box_black {
				padding: 8upx 32upx 8upx 32upx;
				border-radius: 24upx;
				border: none;
				margin-right: 24upx;
				margin-bottom: 5upx;
				background: #48454D;
				display: inline-block;
			
				.text {
					width: 100%;
					display: flex;
					justify-content: center;
					font-size: 28upx;
					color: white;
				}
			}
		}


		.evaluate_area {
			justify-content: space-between;
			margin-bottom: 20upx;

			.rateValue {
				font-size: 48upx;
				font-weight: bold;
				color: #333333;
				margin-right: 12upx;
			}

			.right_area {
				display: flex;
				justify-content: space-between;
				font-size: 20upx;
				font-weight: 400;
				color: #666666;
			}
		}
	}

	.bottom_list {
		margin: 0upx 30upx 0 30upx;
		background-color: #fff;

		.row {
			display: flex;
			align-items: center;
			justify-content: space-between;
			background-color: #fff;
			padding: 8upx 20upx 8upx 20upx;

			.title {
				font-size: 30upx;
				color: #222222;
				display: flex;
				align-items: center;
				margin: 8rpx 0 8rpx 0;

				image {
					width: 44upx;
					height: 44upx;
					margin-right: 20upx;
				}
			}

			.right {
				display: flex;
				align-items: center;
				color: #999;

				.icon {
					width: 42upx;
					color: #909090;
					font-size: 23upx;
				}
			}

		}
	}

	.bottomSheet_content {
		margin: 28upx 30upx;
		display: flex;
		flex-direction: column;

		.card {
			width: 640upx;
			height: 362upx;
			position: relative;
			margin: 0 auto;

			.bg {
				width: 100%;
				height: 100%;
			}

			.top {
				position: absolute;
				top: 0;
				left: 0;
				// padding: 19upx;
				width: 100%;

				.first_line {
					padding: 45upx 0 0 45upx;
					display: flex;
					align-items: center;

					.avater {
						margin-right: 24upx;
					}

					.name {
						font-size: 30upx;
						font-weight: 600;
						color: #FFFFFF;
						margin-bottom: 8upx;
					}

					.tag {
						background: #B1BEFD;
						border-radius: 4upx;
						padding: 6upx 12upx;
						font-size: 20upx;
						font-weight: 400;
						color: #FFFFFF;
					}
				}

				.bottom_line {
					color: white;
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin: 15upx 45upx 0 45upx;

					.left {
						font-size: 30upx;
						font-weight: bold;
					}

					.tip {
						font-size: 20upx;
						font-weight: 400;
						color: #FFFFFF;
						padding-bottom: 2upx;
					}

					.num {
						font-size: 40upx;
						font-family: PingFang-SC-Bold, PingFang-SC;
						font-weight: bold;
						color: #FFFFFF;
					}
				}
			}

			.right_top {
				width: 114upx;
				height: 34upx;
				position: absolute;
				right: 19upx;
				top: 19upx;

				image {
					height: 100%;
					width: 100%;
				}
			}

			.right_top2 {
				width: 55upx;
				height: 65upx;
				position: absolute;
				right: 47upx;
				top: 58upx;

				image {
					height: 100%;
					width: 100%;
				}
			}
		}

		.title {
			font-size: 30upx;
			font-weight: bold;
			color: #333333;
		}

		.list-cell {
			display: flex;
			align-items: center;
			justify-content: space-between;
			box-sizing: border-box;
			width: 100%;
			padding: 23upx 0;
			overflow: hidden;
			color: #666666;
			font-size: 28upx;
			margin-bottom: 56upx;
		}
	}

	.lgbtn {
		margin-bottom: 20upx;
	}
</style>
